<template>
	<view class="message-emitter" :class="{'safeArea':$systemInfo.platform == 'ios'}">
		<view class="message-emitter-publish-container">
			<view class="publish-left-wrapper">
				<view class="change-msg-type-button voice" @click="changeMsgType(msgType=='voice'?'text':'voice')">
					<i class="iconfont icon-voice icon" />
				</view>
			</view>
			<view class="publish-center-wrapper" :class="{'disabled':isNoConsultDuration||orderDetail.status == 3}">
				<!-- 						<u-input v-model="textMessageValue" ref="textInput" type="textarea" border border-color="#ffffff"
					height="36" :auto-height="isTextInputHightAuto" :clearable="false" @focus="textInputFocus"
					@blur="textInputBlur" maxlength="300" :show-confirmbar="false" trim class="text-input"
					 @keyboardheightchange="keyboardheightchange" v-if="msgType != 'voice'"
					:focus="focuesState" /> -->
				<!-- <input type="text" :adjust-position="false" confirm-type="send" @keyboardheightchange="keyboardheightchange" @focus="textInputFocus"/> -->
				<textarea v-model="textMessageValue" :show-confirm-bar="false" class="text-input"
					:auto-height="isTextInputHightAuto" :adjust-position="false" confirm-type="send"
					@keyboardheightchange="keyboardheightchange" @focus="textInputFocus" :focus="focuesState"
					ref="textInput" v-if="msgType != 'voice'" :disabled="isNoConsultDuration||orderDetail.status == 3"
					:placeholder="isNoConsultDuration?'暂无咨询时长':orderDetail.status == 3?'咨询已结束':''"></textarea>
				<view class="voice-input" v-else @touchstart="startTouch" @touchend="endTouch"
					@touchmove="voiceTouchMove">
					{{voiceInputText}}
				</view>
			</view>
			<view class="publish-right-wrapper">
				<template v-if="textMessageValue.length == 0">
					<view class="change-msg-type-button expression" @click="changeMsgType('emoji')">
						<i class="iconfont icon-emoji icon" />
					</view>
					<view class="change-msg-type-button other" @click="changeMsgType('other')">
						<i class="iconfont icon-other icon" />
					</view>
				</template>
				<template v-else>
					<button class="submit-button" @click="submitTextMessage">发送</button>
				</template>
			</view>
		</view>
		<voiceMask v-if="isVoiceMaskShow" :touchCoordinates="touchCoordinates" @startRecord="startRecord"
			@onCancelButton="getCancelButtonState" @endRecords="endTouch" />
	</view>
</template>

<script>
	let timer;
	const recorderManager = uni.getRecorderManager();
	let voiceTimer;
	import voiceMask from "../voice-mask/voiceMask.vue";
	export default {
		components: {
			voiceMask
		},
		props: {
			msgType: {
				type: String,
				default: 'text'
			},
			isNoConsultDuration: {
				type: Boolean,
			},
			orderDetail: {
				type: Object,
			}
		},
		data() {
			return {
				focuesState: false,
				isVoiceMaskShow: false,
				voicePath: '',
				isOnCancelBtn: false,
				startTime: '',
				touchCoordinates: {
					X: 0,
					Y: 0,
				},
				textMessageValue: '',
				voiceInputText: '按住 说话',
			}
		},
		computed: {
			// emojiPathSet() {
			// 	return (path) => {
			// 		return require("@/static/emoji/" + path);
			// 	}
			// },
			isTextInputHightAuto() {
				return this.textMessageValue.length <= 68;
			},
		},
		created() {
			recorderManager.onStop((res) => {
				console.log('recorder stop', res);
				this.isVoiceMaskShow = false;
				clearInterval(voiceTimer);
				// this.voicePath = res.tempFilePath
				const endTime = +new Date();
				if (endTime - this.startTime < 1000) {
					return this.$showToast('说话时间太短了')
				} else if (this.isOnCancelBtn) {
					console.log('取消录音')
				} else {
					console.log('录音结束')
					this.$emit('sendVoiceMsg', {
						filePath: res.tempFilePath,
						duration: this.duration * 1000,
					});
				}

			});
			recorderManager.onError((err) => {});
		},
		mounted() {
			uni.$off('selectRemindUser')
			uni.$on('selectRemindUser', nickname => {
				this.textMessageValue += `${nickname} `;
				this.focuesState = false;
				setTimeout(() => {
					this.focuesState = true;
				}, 0)
			});

			uni.$off('chooseEmoji');
			uni.$on('chooseEmoji', emoji => {
				this.textMessageValue += emoji;
			})
		},
		watch: {
			textMessageValue: {
				handler(val, oval) {
					if (val.length < oval.length) {
						return
					}
					const keyCode = val[val.length - 1];
					if (keyCode == '@') {
						uni.hideKeyboard()
						this.$emit('showContactList')
					}
				},
			}
		},
		methods: {
			async changeMsgType(e) {
				console.log(e);
				if(e == 'voice'){
					await this.$wx.getPermission('scope.record', '麦克风')
				}
				this.$emit('setMsgType', e);
			},
			textInputFocus() {
				// if (this.msgType == 'other' && this.$systemInfo.platform == 'ios') {
				// 	uni.hideKeyboard();
				// }
				// setTimeout(()=>{
				this.$emit('setMsgType', 'text');
				// },300)

			},
			textInputBlur() {},
			keyboardheightchange(e) {

				// if (this.$systemInfo.platform == 'ios') {
				// clearTimeout(timer);
				// timer = setTimeout(() => {
				console.log('软键盘弹出emitter', e);
				// if (e.height > 0) 
				this.$emit('keyboardheightchange', e.detail);
				// }, e.duration * 2000)
				// }
			},
			submitTextMessage() {
				this.$emit('submitTextMessage', this.textMessageValue);
				this.textMessageValue = '';
			},
			async startTouch(e) {
				await this.$wx.getPermission('scope.record', '麦克风')
				this.touchCoordinates.X = e.touches[0].clientX
				this.touchCoordinates.Y = e.touches[0].clientY
				this.voicePath = '';
				this.startRecord();
				this.voiceInputText = '松开 结束';
				this.isVoiceMaskShow = true;
				this.isOnCancelBtn = false;
				this.startTime = +new Date();
				uni.vibrateShort();
				this.duration = 1;
				clearInterval(voiceTimer);
				voiceTimer = setInterval(() => {
					this.duration++;
				}, 1000)


			},
			startRecord() {
				console.log('开始录音')
				console.log(recorderManager)
				return recorderManager.start({
					duration: 60000,
					format: 'mp3'
				});
			},
			endRecord() {
				console.log('结束录音')
				this.isVoiceMaskShow = false;
				recorderManager.stop();
			},
			endTouch() {
				console.log("1")
				this.isVoiceMaskShow = false;
				this.voiceInputText = '按住 说话';
				this.endRecord();
			},
			voiceTouchMove(e) {
				this.touchCoordinates.X = e.touches[0].clientX
				this.touchCoordinates.Y = e.touches[0].clientY
			},
			getCancelButtonState(e) {
				console.log('是否手指在取消按钮上')
				this.isOnCancelBtn = e;
			},
		}
	}
</script>

<style scoped lang="scss">
	@import "./messageEmitter.scss";
</style>
